<script setup>
import PageBack from "@/components/common/pageBack/pageBack.vue";
import BannerWave from "@/components/common/bannerwave/bannerwave.vue";
import {useWebInfo} from "@/store/webinfo.js";

const webInfoStore = useWebInfo();
const {webInfo} = webInfoStore;
const printerInfo = ref("");
const appear = (content) => {
  let count = 0;
  const timer = setInterval(() => {
    printerInfo.value = content.substring(0, count);
    if (count < content.length) {
      count++;
    } else {
      clearTimeout(timer);
    }
  }, 200);
};

onMounted(() => {
  const webInfoStore = useWebInfo();
  const {webInfo} = webInfoStore;
  const content = webInfo.webSign;
  appear(content);
});
</script>

<template>
  <article>
    <!-- 页面背景组件 -->
    <PageBack video="/2023/12/16/xue-zhi-lei.mp4"></PageBack>
    <!-- 页面文字 -->
    <div class="signMsg myCenter my-animation-hideToShow">
      <h1 class="title">
        <span v-for="(t, index) in webInfo.webTitle" :key="index">{{ t }}</span>
      </h1>
      <div class="printer">
        <h3>
          <span>/ {{ printerInfo }} /</span>
          <span v-if="printerInfo.length === 0" class="cursor">/</span>
        </h3>
      </div>
      <BannerWave></BannerWave>
    </div>
  </article>
</template>

<style scoped lang="less">
article {
  width: 100%;
  height: 100vh;

  .signMsg {
    position: relative;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    user-select: none;
    overflow: hidden;

    .title {
      color: var(--white);
      font-size: 40px;
      padding: 20px 0;
    }

    .printer {
      cursor: pointer;
      color: var(--white);
      background: var(--translucent);
      border-radius: 10px;
      padding-left: 20px;
      padding-right: 20px;

      h3 {
        padding: 20px 0;
      }
    }
  }
}
</style>